<template>
  <div>
    <el-card style="margin-bottom: 20px">
      <el-form>
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单编号：" label-width="110px">
              <el-input placeholder="请输入订单编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单状态：" label-width="110px">
              <!--              <el-input placeholder="请选择订单编号"></el-input>-->
              <el-select v-model="tableData.status" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="付费状态：" label-width="110px">
              <!--              <el-input placeholder="请选择订单编号"></el-input>-->
              <el-select v-model="tableData.paymentStatus" placeholder="请选择">
                <el-option label="未付" value="1"> </el-option>
                <el-option label="已付" value="2"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="发件人姓名：" label-width="110px">
              <el-input placeholder="请输入发件人姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发件人电话：" label-width="110px">
              <el-input placeholder="请输入发件人电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发件人地址：" label-width="110px">
              <el-input placeholder="请选择"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="收件人姓名：" label-width="110px">
              <el-input placeholder="请输入发件人姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收件人电话：" label-width="110px">
              <el-input placeholder="请输入发件人电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收件人地址：" label-width="110px">
              <el-input placeholder="请选择"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary">搜索</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%; margin-bottom: 20px"
      >
        <el-table-column type="index" label="地址"> </el-table-column>
        <el-table-column prop="id" label="订单编号" width="180">
        </el-table-column>
        <el-table-column prop="memberId" label="运单编号" width="180">
        </el-table-column>
        <el-table-column prop="createTime" label="下单时间" width="160">
        </el-table-column>
        <el-table-column prop="status" label="订单状态"> </el-table-column>
        <el-table-column prop="senderName" label="发件人姓名">
        </el-table-column>
        <el-table-column prop="senderPhone" label="发件人电话" width="150">
        </el-table-column>
        <el-table-column prop="senderAddress" label="发件人地址" width="180">
        </el-table-column>
        <el-table-column prop="receiverName" label="收件人姓名">
        </el-table-column>
        <el-table-column prop="receiverPhone" label="收件人电话" width="150">
        </el-table-column>
        <el-table-column prop="receiverAddress" label="收件人地址" width="180">
        </el-table-column>
        <el-table-column prop="pickupType" label="取件类型">
          <template #default="{ row }">
            {{ row.pickupType === 1 ? "网点自寄" : "上门取件" }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" label="付费类型">
          <template #default="{ row }">
            {{ row.paymentMethod === 1 ? "预结" : "到结" }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentStatus" label="付费状态">
          <template #default="{ row }">
            {{ row.paymentStatus === 1 ? "未付" : "已付" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          fixed="right"
          align="center"
          width="100"
        >
          <template #default>
            <el-button type="text" style="color: #419eff">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="list.page"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="list.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getOrderListApi } from "@/api/business";
const statusMap = {
  23000: "待取件",
  23001: "已取件",
  23002: "网点自寄",
  23003: "网点入库",
  23004: "待装车",
  23005: "运输中",
  23006: "网点出库",
  23007: "待派送",
  23008: "派送中",
  23009: "已签收",
  23010: "拒收",
  230011: "已取消",
};
export default {
  name: "OrderManagePage",
  data() {
    return {
      options: [
        {
          label: "待取件",
          value: "23000",
        },
        {
          label: "已取件",
          value: "23001",
        },
        {
          label: "网点自寄",
          value: "23002",
        },
        {
          label: "网点自寄",
          value: "23003",
        },
        {
          label: "待装车",
          value: "23004",
        },
        {
          label: "运输中",
          value: "23005",
        },
        {
          label: "网点出库",
          value: "23006",
        },
        {
          label: "待派送",
          value: "23007",
        },
        {
          label: "派送中",
          value: "23008",
        },
        {
          label: "已签收",
          value: "23009",
        },
        {
          label: "拒收",
          value: "23010",
        },
        {
          label: "已取消",
          value: "230011",
        },
      ],
      tableData: [{}],
      list: {
        id: "",
        page: 1,
        pageSize: 10,
        paymentStatus: "",
        pickUpType: "",
        receiverCityId: "",
        receiverCountyId: "",
        receiverName: "",
        receiverPhone: "",
        receiverProvinceId: "",
        senderCityId: "",
        senderCountyId: "",
        senderPhone: "",
        senderProvinceId: "",
        status: "",
      },
      total: 0,
    };
  },
  created() {
    this.getOrderList();
  },
  methods: {
    async getOrderList() {
      const res = await getOrderListApi(this.list);
      console.log(res);
      this.tableData = res.data.items;
      this.total = +res.data.counts;
      this.tableData.forEach((item) => {
        item.status = statusMap[item.status];
      });
    },
    handleSizeChange(a) {
      this.list.pageSize = a;
      this.getOrderList();
    },
    handleCurrentChange(a) {
      this.list.page = a;
      this.getOrderList();
    },
  },
};
</script>

<style lang="scss" scoped></style>
